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Icons.send, 
color: Mcolors.blue, 


DEBUG CONSOLE 


D/InsetsController 9105 s i , fromImestrue 
indov nputMethodManager( 9165): show’ nput() view er .embedding.andr 
flutter-plu i 383 VFE F 6,0-1080,2148 #1 ai 73741824) flags-e rea: 
flutt 
show(ime(), fromIme=true 
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09:27 19:10 


WE) ee mom i20 


Kita buat pertama kali simpan sebuah pesan string nya 
Isinya string kosong 
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Media Playback Audio Video Subtitle 


File Edit Selection View Go Run Terminal e new messages.dar attin ) oC [ugs ng 
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CHATTING APP 


Tools View Help 


B dartt € s Ne ages e s StatefulWidget 
iper(key: key); 


@override 


State<Ne 


NA cs NewMes state extends State 
String _message = 
@override 
Widget build(Bu 
| messages.dart return C ( 
© firebase options dart padding: 
© generated plugin reg child: 
children: 


Expandec¢ 
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Kemudian textfield kita tambahkan onChange untuk membuat pesan kita 
masukekan kedalam masage 

Tapi jgn lupa bungkus setsate 

Ini ketika kita ketik maka masage sama dgn yg kita ketik 
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Tools View Help 
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CHATTING APP € new me 
BI dart tool @overriae 

Widget build 

return Conta 
padding: 

child: Ro 

children: 

Expanded ( 
child: TextField 
onChanged: (value) 
setState( 


_message = value; 


message = v. 
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OUTLINE app time stats 
TIMELINE D/EGL 9105): app time stats: avg-518 
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10:28 19:10 


Hom cz 
Sekarang tingal kirim 

Jika pencet icon kirim 

data tambahkan 

di iconnbuton onpased buat fungsi baru 
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x] File Edit 
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CHATTING APP 


Tools View Help 


Selection View Go Run Terminal Help 


D flutter-pi 


OUTLINE 
TIMELINE 
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child: TextField 
onChange (value) { 
setState( 


_message = value; 


onPressed: _sendMessagd, 
icon 


-blue, 
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Buat diatas 
Void 
A 11. Input Pesan.mp4 - VLC media player 


Media Playback Audio Video Subtitle 
File Edit 
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CHATTING APP 


Tools View Help 


ection View Go Run Terminal Help 


screen. dart 
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OUTLINE 
TIMELINE 
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Widget 


e DOO 
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NewMes 


extends State«New 


String message - 


oid _sendMessage 


@override 


build(E 


return C 


ntext context 


padding: 
child: 
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tiags=0 reas 


utter.embeddi 
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app time st avg=90.0@ms min-38.80ms m 
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Ketika ini diklik buat perbandingan 
Jika ketik atau pesan ini kosong maka pesan ini tidak jalan 


Buat bandingkan ini 


Jika pesan nya kosng ==” maka dia tidak return; apapun 
Jika tidak kosong maka dia add datanya 


Firebasefirestore.intance.colection pakai yg chat kemudian 


add 


Pakai yg 'text' dari: masage 
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Media Playback Audio Video Subtitle 
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Tools View Help 
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CHATTING APP M IN 
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FirebaseFirestore.instance.collection( 


.message, 


@override 
build(Buil ontext context 
itainer ( 
padding: 
child: message = v 
DEBUG CONSOLE y 
app_time_sta i max-580.96ms count 9g h 
app time stats mi max 4.54ms coun 
app time stats: av i 7 9ms count 
flutter-plu 5 i 9105): app t 
B flutter-plug es c ( app t 
i app time s 
app. t 
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Sekarang coba tes seharusnya bisa 
Coba krim maka sudah bertambah datany 


A 11. Input Pesan.mp4 - VLC media player — x 
Media Playback Video Subtitle 


Audio Tools View Help 
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CHATTING APP 
i dartt 


itton( 
onPressed: 
icon: 
ns.send, 
color: Mcolors.blue, 
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InsetsController snow(ime(), fromime-true 

EG 5): app time sta avg-320.87ms min-49.11ms ma: 
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Ketika dikirim maka pesan hilang tapi belum hilang 
Kita buat controler disini 
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CHATTING APP 
im datt ass 1j s extends 


€ new messagesdart € 6 


StatefulWidget 


? key}) : super(key: key); 


» createState 


dart 
scree dart 
String message = ''; 
© form auth.dart 
& dart 
& new messages.dart 
© firebase options.dart 
€. generated plugin registrant. 
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app_time_stats 

app_time_stats 
indc 3 app time stats 
flutte D app time stats 


flutter-p n D/EG ulati app time stats 


CENGENG 


app_time_stat 
OUTLINE 

app time stats 
TIMELINE app time stats 
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final messageController 


Newt jS exter 


min-485.99ms 


count 
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count 
count 
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count 
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Kita test yg kosong 
Kitatambhkan maka tidak bisa 
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Media Playback Audio Video Subtitle 


Tools View Help 
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@override 


State«N 
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StatefulWidge 
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_NewMess State extends 
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d _sendMessa 
if (_message 
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show(ime(), 
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flutter-plugins cies ( 9105): app time stats 
app time stats 

OUTLINE 
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TIMELINE 9105): app time stats 
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IInputConnectionWrapper( 9105): endBatchE 


fromIme- 
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unt=32 
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13:29 
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Kalau kosong maka tidak mau berjalan 


Kemudian tambah kita buat terhapus ketika di enter 


Yaitu masage coloreler clear kita hapus 


19:10 
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B & © new messages.dart € 


ai messagecontroiser 


void  sendMessage() 4 
if (message 


instance.collection( ).add( 
_message, 


creen.dart 


form_auth.dart 

ENE. messageController.clear(); 
new_messages.dart 

& fire options.dart 

© generated plugin registrant di @override 

€ maind. Widget build(BuildContext context 


return Container( 
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app time stats 
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app_time_stats 

app_time_stats 
TIMELINE G app time stats 
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Controler nya kita tambhkan 
A 11. Input Pesan.mp4 - VLC media player 5s x 


Media Playback Audio Video Subtitle Tools View Help 


le Edit Selection View Go Run Terminal Help v s,dar atting app - Visual Studio Code Uc 


E " & € new messages.dart X 
CHATTING APP € new ^ j 
W datt padding: 
id child: 
children: 
Expand 
child: xtField 
controller: messageControllerj, 
onChanged: (value) { 
setState( 


message = value; 


conButt 
onPressed 
icon: 
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D/EGL emulation app time stats: avg=5@2.@1ms min-500.91ms max-503.1 countz2 
EC emulation app_time_stats: avg=503.29ms mi 9 max 7 coun 
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flutter-plug EGL emula app t 

app_t 


app tim s: avg-498.40m 


cing files 


OUTLINE 
EGL emulation app_t 


TIMELINE )/EGL. emulation app_t © Performing hot reload. 
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Kita buat ee kalau kirim maka terhapus 

Kalau kosong masih eee juga dikirim 

Karena di ketika sama dgn value padahal sudah diclear seharusnya buat juga disini 
Buat sting kosong 
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Media Playback Audio Video Subtitle Tools 


View Help 
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CHATTING APP 
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Chatting App 


instance.collection 
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alsidifjigihi|jikil 
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flutte 


OUTLINE 


TIMELINE 
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Kita reset disini 

Coba lagi 

Maka berhasil sudah menambhakn data 

Masalhnya disini masih belum terurutan 

Karena coba tulis uu maka posisi teracak 

Caranya karena database belum kasih secara berurutan 
Acak tampilan 

Kemudian di listbuilder kita kasi 

Reverse yaitu dibalik 

Listnya dari bawh 
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CHATTING APP : ~ " 


@ dartt context 


t «QuerySnapshot»( 
stream: e Fi ore.instance.collection 
snapshots(), 
builder: (context, snapshot 

if (snapshot.connectionState 

active) 

final chatList = snapshot.data!.docs; 
iew.builder( 


reen dart 


reverse: true, 
itemCount: chatList.length 
itemBuilder: (context, index 
z final chat = chatList[index]; 
© generated plugin regist et Text(chat[ 1); 
[E 
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Datanya belum berurutan 

Buat datanya berurutan 

Buat satu key lagi yaitu createdAd fungsinya buat apa 
Jadi urutan datanya akan sesuai dgn waktunya 

Jadi yg terbaru itu paling bawah 

Paling lama yaiitu dibawah 

createdAt isinya timestamp.now 
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CHATTING APP 


clas ewMe sState extends State<Ne 
String message - 5 
final messageController = TextEditingController(); 


void  sendM 
if ( message 


return; 


package:cloud firestore platform. nterface, /src/timestamp.dart 
F 


Create a [Timestamp] from ime].now() 


Timestamp.now( 


messageController.clear(); 
.message = F 
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Dari package firestore 


Dari bawaan flutter nya 
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ing message - - 
final messageController - 


FirebaseFirestore.instance.collection( 
: message, 
: eA. now (), 


messageController.clear(); 
_message = 
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app time s 
app time s 
app time s 
app time s 
app time s 


OUTLINE 
app time s 
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Kita hapus semua 
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Cloud Firestore Gotodocs @ D 
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Karena buat chat baru 

Yg ada satu tambhan key nya yaitu cretedAt 

Karena datanya sebelumnya tidak dipakai lagi 

Karena sudah membuat created maka harusmenampilkan datanya 

Datanya secara atau patokan secara waktu 


Ke masage karena ini belum sesuai dgn wakttu 


Karena ini belum sesuai waktu 
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super(key: key); 


context 


Firestore.instance.collection('d 
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if (snapshot 
active) 
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t , 


itemCount: chatList.length, 
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final chat = chatList[index]; 
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Kita tambhkn order by lalu cretedBy sesuai dgn 
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vg=501.33m: n=500.81ms 


Performing hot relo 
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Jalankan 

Maka sudah ada 

Disini malah terbalik 

Yg terbaru seharusnya dibawah malah 
Terbalikanya yaitu descending 


diatas maka buat 


Dari bawwah ke atas 
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Chatting App 
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Ini sudah terbaru 


Semua sudah berjalan dgn baik 
Tingal kasih style chat 


